<template>
  <div>
    <el-form ref="searchform" :model="form"  label-width="120px">
      <el-col :span="6">
        <el-form-item label="时间" prop="timetype">
          <el-select
           class="w"
            v-model="form.timetype"
            clearable
            @change="getToolTypeDetail"
            placeholder="请选择"
          >
            <el-option label="季度" value="quarter"></el-option>
            <!-- <el-option label="月份" value="month"></el-option> -->
            <el-option label="年度" value="year"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" style="margin-left:-200px">
        <template>
          <el-form-item label="-" prop="time">
            <template
              v-if="form.timetype === 'month' || form.timetype === 'year'"
            >
              <el-date-picker
               style="width:170px;  height: 36px"
                :key="timeKey"
                v-model="form.time"
                clearable
                :type="form.timetype"
                :value-format="form.timetype === 'month' ? 'yyyyMM' : 'yyyy'"
                :placeholder="`选择 ${form.timetype === 'month' ? '月' : '年'}`"
              >
              </el-date-picker>
            </template>
            <!-- 季度选择器 -->
            <template v-else-if="form.timetype === 'quarter'">
              <QuarterSelect
                ref="quarter"
                @getQuarterValue="getQuarterValue"
              ></QuarterSelect>
            </template>
            <template v-else>
              <el-input
                clearable
                v-model="form.time"
                placeholder="请输入内容"
                class="input-form"
              ></el-input>
            </template>
          </el-form-item>
        </template>
      </el-col>
       <!-- <el-col :span="8"> 
        <el-button type="primary" @click="handlerSeach">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-col>  -->
    </el-form>
  </div>
</template>
 
<script>
import QuarterSelect from './QuarterSelect.vue'
export default {
  components: {
    QuarterSelect
  },
  data() {
    return {
      form: {
        timetype: '',
        time: ''
      },
      timeKey: '',
    }
  },
  watch: {},
  methods: {
    // 查询
    // handlerSeach() {
    //   console.log(this.form)
    //   // 规则校验
    //   const valid = this.$refs['searchform'].validate()
    //   if (!valid) {
    //     return
    //   }
    // },
    // 时间类型切换
    getToolTypeDetail(val) {
      console.log(val)
      this.form.time = ''
    },
    // 季度选择
    getQuarterValue(value) {
      const { date, year, quarter } = value
      this.form.time = date
      console.log(year, quarter)
    },
    // 重置功能
    // resetForm() {
    //   if (this.$refs.quarter) {
    //     this.$refs.quarter.clearClick()
    //   }
    //   this.$refs.searchform.resetFields()
    // }
  }
}
</script>
 
<style scoped>
.input-form {
  width: 170px;
  
}
.w{
  width: 150px !important;
}
</style>

